<template>
  <div class="enterprise-container">
    <a-row 
      type="flex" 
      justify="center"
      :gutter="[32, 32]"
      class="card-row"
    >
      <a-col 
        v-for="(card, index) in cardData"
        :key="index"
        :xl="12" 
        :lg="12"
        :md="12"
        :sm="12"
        :xs="24"
      >
        <div 
          class="decorative-border"
          :style="{ background: card.color }"
        ></div>
        <a-card
          hoverable
          class="enterprise-card"
          :body-style="{ padding: '24px', height: '240px' }"
          @click="handleNavigation(card.path)"
        >
          <div class="card-content">
            <div class="icon-wrapper">
              <component 
                :is="card.icon" 
                :style="{ 
                  fontSize: '56px',
                  color: card.color 
                }"
              />
            </div>
            <h3 class="card-title">{{ card.title }}</h3>
            <p class="card-description">{{ card.description }}</p>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import {
  DeploymentUnitOutlined,
  EnvironmentOutlined,
  ApartmentOutlined,
  ClusterOutlined
} from '@ant-design/icons-vue';

export default {
  components: {
    DeploymentUnitOutlined,
    EnvironmentOutlined,
    ApartmentOutlined,
    ClusterOutlined
  },
  data() {
    return {
      cardData: [
        {
          title: '概念板块',
          description: '基于市场热点形成的投资概念分类',
          path: '/concept',
          icon: 'DeploymentUnitOutlined',
          color: '#722ed1'
        },
        {
          title: '地域板块',
          description: '按地理区域划分的上市公司分类',
          path: '/region',
          icon: 'EnvironmentOutlined',
          color: '#13c2c2'
        },
        {
          title: '同花顺行业',
          description: '权威的行业分类标准与分析体系',
          path: '/ths-industry',
          icon: 'ApartmentOutlined',
          color: '#1890ff'
        },
        {
          title: '证监会行业',
          description: '官方发布的行业分类指导标准',
          path: '/csrc-industry',
          icon: 'ClusterOutlined',
          color: '#52c41a'
        }
      ]
    };
  },
  methods: {
    handleNavigation(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style lang="less" scoped>
.enterprise-container {
  padding: 40px 24px;
  background: #f8f9fa;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-row {
  max-width: 1200px;
  width: 100%;
}

.enterprise-card {
  position: relative;
  margin: 16px;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--card-color) 0%, rgba(255,255,255,0) 100%);
    opacity: 0.4;
    transition: opacity 0.3s;
  }

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    
    &::before {
      opacity: 1;
    }
    
    .card-title {
      color: var(--card-color);
    }
  }
}

.decorative-border {
  position: absolute;
  top: -1px;
  left: -1px;
  width: 48px;
  height: 48px;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  z-index: 2;
}

.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 16px;
}

.icon-wrapper {
  padding: 16px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  margin-bottom: 24px;
}

.card-title {
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 12px;
  transition: color 0.3s;
}

.card-description {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  text-align: center;
  line-height: 1.6;
  margin: 0;
  max-width: 280px;
}


.enterprise-card {
  @colors: #722ed1, #13c2c2, #1890ff, #52c41a;
  
  each(@colors, {
    &[data-color-index="@{index}"] {
      --card-color: @value;
    }
  });
}
</style>